<template>
	<view class="wanl-order-list">
		<!-- <view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)"> {{ item.text }} </view>
		</view> -->
		<view style="height: calc(100% - 60rpx)">

			<view class="flex flex-end mr10 p10" @tap="toRulePage">规则</view>
			<view class="tab-content" v-if="list.length">
				<view v-for="(coupon, index) in list" :key="index" class="item-counpon margin-bottom-bj radius-bock">
					<view class="up">
						<view class="item-left">
							<view class="dot dot1"></view>
							<view class="dot dot2"></view>
							<view class="dot dot3"></view>
							<view class="dot dot4"></view>
							<view class="dot dot5"></view>
							<view class="dot dot6"></view>

							<block
								v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
								<view class="colour">
									<text class="text-price"></text>
									<text class="prices text-red">{{ Number(coupon.price) }}</text>
									<text> 起</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									每满{{ Number(coupon.limit) }}可用
								</view>
							</block>
							<block
								v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
								<view class="colour">
									<text class="prices text-red">{{ Number(coupon.discount) }}</text>
									<text class="discount text-red">折</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									满{{ Number(coupon.limit) }}打{{ Number(coupon.discount) }}折
								</view>
							</block>
							<block v-if="coupon.type == 'shipping'">
								<view class="colour">
									<text class="prices text-red">包邮</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									满{{ Number(coupon.limit) }}元包邮
								</view>
							</block>
						</view>
						<view class="item-right-coupon padding-bj" :class="coupon.open ? 'item-right-coupon-open' : ''">
							<view class="left">
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle"
										style="background-color: #fd8c00; color: #ffffff;">
										{{ coupon.type_text }}
									</view>
									<view class="text-cut text-lg">{{ coupon.name }}</view>
								</view>
								<view class="wanl-gray">
									<text
										class="startdate">{{ coupon.startdate && coupon.startdate.replaceAll('-', '.') }}</text>
									<text>-</text>
									<text
										class="startdate">{{ coupon.enddate && coupon.enddate.replaceAll('-', '.') }}</text>
								</view>
								<view class="description" @tap="changeDesc(index)">
									<text>使用说明</text>
									<image src="../../../static/images/default/shrink.png" class="image shrink"
										v-if="!coupon.open">
									</image>
									<image src="../../../static/images/default/expand.png" class="image coupon-sign"
										v-if="coupon.open">
									</image>
								</view>
							</view>
							<view class="content text-min">
								<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
									class="coupon-sign" v-if="coupon.state"></image>
								<view class="cu-btn sm round"
									style="background-color: #fd8c00; color: #ffffff;width: 120rpx;"
									@tap="onReceive(index)" v-if="!coupon.state">
									<text>去使用</text>
								</view>
							</view>
						</view>
					</view>

					<view class="down" v-if="coupon.open">
						<view class="desc">{{ coupon.coupon.content || coupon.rangetype_text }}</view>
					</view>
				</view>

			</view>

			<view v-else>
				<!-- <text>123</text> -->
				<!-- <view class="no"
					style=" margin: 6.93vw 0; display: flex;flex-direction: column;align-items: center;padding: 100rpx 0;">
					<image style="width: 36.26vw;height: 25.33vw; " src="../../../static/images/user/wu.png" mode="">
					</image>
					<text style="color: #7B7B7B;">暂无可用优惠券</text>
				</view> -->
				<wanl-empty text="暂无可用优惠券"></wanl-empty>
				
				<!-- 猜你喜欢 -->
				<!-- <view class="wanl-you-like margin-bottom-sm"
					:style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }">
				</view>
				<wanl-product :dataList="likeData" />
				<uni-load-more :status="status" :content-text="contentText" /> -->
			</view>
			<view class="edgeInsetBottom"></view>

		</view>
		<!-- 
			<uni-load-more :status="tag.loadingType" :content-text="contentText" />
			<view class="edgeInsetBottom"></view> -->
		<view class="inse_Bottom"
			style="position: fixed;bottom: 50rpx;left:0;right:0;width: 96%;height: 80rpx;line-height: 80rpx;margin:0 auto;color:#ffffff;border-radius: 50rpx;text-align: center;background-color: #fd8c00;"
			@tap="historyQ(index)">历史优惠券</view>
	</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				can: true,
				likeData: [],
				tabCurrentIndex: 0,
				status: "",
				list: [],
				navList: [{
						type: 'reduction',
						text: '满减券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					},
					{
						type: 'discount',
						text: '折扣券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					},
					{
						type: 'shipping',
						text: '包邮券',
						loadingType: 'more',
						current_page: 1,
						cardList: []
					}
				],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: ''
				}
			};
		},
		onLoad(options) {
			// 优惠券列表
			this.loadData(1);

			// dolike
			this.loadlikeData();
			// console.log(options)
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		methods: {
			historyQ() {
				console.log('historyQ')
				uni.navigateTo({
					url: "/pages/user/coupon/history"
				})
			},
			toRulePage() {
				uni.navigateTo({
					url: "/pages/user/coupon/rulePage"
				})
			},
			// 是否展开使用说明
			async changeDesc(index) {
				this.list[index].open = !this.list[index].open;
				this.$set(this.list, index, this.list[index]);
			},
			toIndex() {
				uni.reLaunch({
					url: "/pages/index"
				})
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//获取订单列表
			async loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let type = navItem.type;
				console.log(source)
				// //判断是否最后一页
				// if (navItem.loadingType == 'noMore') {
				// 	return;
				// }
				//tab切换只有第一次需要加载数据
				// if (source === 'tabChange' && navItem.loaded === true) {
				// 	return;
				// }
				// //防止重复加载
				// if (navItem.loadingType === 'loading') {
				// 	return;
				// }
				// navItem.loadingType = 'loading';
				// 获取列表
				this.$api.get({
					url: '/wanlshop/coupon/getMyList',
					data: {
						// type: "",
						// page: navItem.current_page\

						state: source
					},
					success: res => {
						this.list = res.data

						console.log(this.list.length, res.data.length)
						navItem.current_page = res.current_page; //当前页码
						if (res.last_page === res.current_page) {
							navItem.loadingType = 'noMore';
						} else {
							navItem.loadingType = 'more';
							navItem.current_page++;
						}
						let cardList = res.data.filter(item => {
							item = Object.assign(item, {
								state: false
							});
							return item.type === type;
						});
						cardList.forEach(item => {
							navItem.cardList.push(item);
							console.log()
						});
						//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.$set(navItem, 'loaded', true);
					}
				});
			},
			// 领取优惠券
			async onReceive(key) {
				// let coupon = this.list[key];
				// this.$api.post({
				// 	url: '/wanlshop/coupon/receive',
				// 	loadingTip: '领取中',
				// 	data: {
				// 		id: coupon.id
				// 	},
				// 	success: res => {
				// 		coupon.id = res.id;
				// 		coupon.state = true;
				// 		this.$wanlshop.msg(res.msg);
				// 		this.$store.commit('statistics/dynamic', {
				// 			coupon: this.$store.state.statistics.dynamic.coupon + 1
				// 		});
				// 	}
				// });

				console.log('领取优惠券')
				// this.$wanlshop.on('/pages/user/coupon/history');
				uni.reLaunch({
					url: "/pages/category"
				})
			},
			onApply(id) {
				this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
			},
			onDetails(data) {
				// this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
			},
			// onLoad() {

			// 	this.loadlikeData();
			// },

			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: '/wanlshop/product/likes?pages=user',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f6efe9;
	}

	.ztai {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2vw 1vw;
		border-radius: 1vw;
		height: 4vw;
		font-size: 3.2vw;
		color: #FF2525;
		font-weight: normal;
		border: 0.2vw solid #FF2525;
		margin-left: 4.266vw;
	}

	.wanl-order-list {
		.tab-content {
			padding: 0 20rpx;

			.head {
				background-color: #ffffff;
			}

			.wanl-coupon {
				background-color: #f6efe9;
			}

			.scroll-y {
				padding: 24rpx;
			}

			.item-counpon {
				min-height: 214rpx;
				border-left: 20rpx solid #fd8c00;
				border-right: 20rpx solid #fd8c00;
				border-top: 16rpx solid #fd8c00;
				border-bottom: 16rpx solid #fd8c00;
				background-color: #fd8c00;

				.up {
					display: flex;
				}

				.down {
					border-radius: 0 0 12rpx 12rpx;

					border-top: 1rpx solid transparent;
					background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 6rpx, white 0, white 10rpx);

					.desc {
						border-radius: 0 0 12rpx 12rpx;
						padding: 20rpx 24rpx;
						background-color: #f6f6f6;
						color: $font-color-light;
					}
				}
			}

			.item-left {
				background-color: #ffe8cc;
				position: relative;
				min-width: 180rpx;
				width: 180rpx;
				max-height: 190rpx;
				text-align: center;
				padding-top: 40rpx;

				.prices {
					font-size: 40rpx;
					font-weight: bold;
				}

				.dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #fd8c00;
					position: absolute;
					left: -8rpx;
				}

				.dot1 {
					top: 12rpx;
				}

				.dot2 {
					top: 42rpx;
				}

				.dot3 {
					top: 72rpx;
				}

				.dot4 {
					top: 102rpx;
				}

				.dot5 {
					top: 132rpx;
				}

				.dot6 {
					top: 162rpx;
				}
			}

			.bg-white {
				background-color: transparent;
				color: #141214;
			}

			.colour {
				color: #141214;

				text {
					color: #141214;
				}

				.text-red {
					color: #141214;
				}
			}

			.item-right-coupon {
				padding: 20rpx;
				max-height: 190rpx;
				display: flex;
				flex-wrap: nowrap;
				background-color: #ffffff;
				border-radius: 0 12rpx 12rpx 0;
				width: 100%;

				.coupon-sign {
					width: 120rpx;
					height: 120rpx;
				}

				.left {
					width: 322rpx;

					.wanl-gray {
						margin: 20rpx 0;
						color: #a3a3a3;
					}
				}

				.title {
					display: flex;
					align-items: center;

					.tagstyle {
						font-size: 22rpx;
						padding: 0rpx 12rpx;
						height: 36rpx;
					}
				}

				.content {
					display: flex;
					align-items: center;
					width: auto;
					
					.cu-btn{
						transform: translateX(16rpx);
					}
				}

				.description {
					display: flex;
					align-items: center;
					width: 146rpx;

					text {
						color: #2f2f2f;
						font-size: 24rpx;
						margin-right: 16rpx;
					}

					.image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.item-right-coupon-open {
				border-radius: 0 12rpx 0 0;
			}
		}
	}
</style>